import { useState, useEffect } from "react";
import { useLocation } from "react-router-dom";
import { getdetail, getSameGoods } from "../tools/ajax";
import Zoom from "../../components/zoom/zoom";
import {NavLink} from 'react-router-dom'
import "./title.css";
function Title() {
  const location = useLocation();
  console.log(location.state);
  let [tail, setTail] = useState([]);
  let [imgs, setImgs] = useState([]);
  let [tui, setTui] = useState([]);
  let [descript,setdescript] = useState([])
  let [description,setdescription] = useState([])
  // 商品信息
  async function aa() {
    let res = await getdetail({ goodId: location.state });
    tail = res.data;
    setTail([...tail]);
    console.log(tail);
    // 照片解析
    imgs = JSON.parse(res.data[0].imgs);
    setImgs(imgs);
    console.log(imgs);
    bb();
    // 商品信息照片解析
    descript=JSON.parse(res.data[0].descriptionImage)
    setdescript(descript)
    console.log(descript);
    // 商品名解析
    description=JSON.parse(res.data[0].description)
    setdescription(description)
    console.log(description);
  }
  // 商品推荐
  async function bb() {
    let res = await getSameGoods({ supplier: tail[0].supplier });
    tui = res.data;
    setTui([...tui]);
    console.log(tui, "商品推荐");
  }
  useEffect(() => {
    aa();
  }, []);
  return (
    <div className="detail-box">
      <Zoom qw={imgs} qh={tail}></Zoom>
      {/* 相似推荐 */}
      <div className="same">
        <p className="title">相似商品推荐</p>
        <div className="list-box">
          {tui.map((item, i) => {
            return (
              <NavLink to= "/title" state={item.Id}>
              <div className="ap" key={i}>
                <img src={item.imageUrl} alt="" />
                <h4>{item.title}</h4>
                <p>
                  <span className="price">￥{item.priceStr}</span>
                  <span className="mack"></span>
                </p>
              </div>
              </NavLink>
            );
          })}
        </div>
      </div>
      {/* 商品信息 */}
      <section class="des">
       <p class="title">商品信息</p>
       <div class="text">{description.map((item,i)=>{
          return(
            <p>
                <span>{ item.title }</span>
                <span>{ item.text }</span>
            </p>
          )
           })}
       </div>
       <div className="imgs">{descript.map((item,i)=>{
        return(
            <img src={item} alt="" />
        )
       })}

       </div>
      </section>
    </div>
  );
}
export default Title;
